<template>
  <div>
    <Row>
      <div class="panel">
        <Row>
          <i-col span="24" >
           <span class="title">
             <Icon type="ios-information-circle" />发放VIP优惠券
           </span>
          </i-col>
        </Row>
        <Row class="panel_content">
          <i-col  offset="1" span="8" v-has=tRole.COUPONS_3_201>
            <div class="tag_item" style="background:#00c853" @click="showDistributeMonth">
              <Icon type="md-cloud-upload" /> <span>发放月度vip优惠券</span>
            </div>
          </i-col>
        </Row>
      </div>
    </Row>

    <Modal v-model="status.modalDistribute.isShow" title="发放VIP月度优惠券"
           closable mask-closable :styles="{top: '20px',bottom:'20px',width:'60%',}">
      <div slot="footer">
        <Button type="primary" style="" @click="distributeMonthCoupons" :disabled="selectedCouponIds.length <= 0">发放</Button>
      </div>
      <Row>选择要发放的优惠券：</Row>
<!--      <Row>
        <Table stripe border :context="this" :columns="couponDefineTable" :data="couponDefineList" class="base_table"
               no-data-text="暂无数据" @on-selection-change="selectedChanged"></Table>
      </Row>-->
      <div style="margin: 1rem 0 0 25px;">
        <Checkbox v-model="selectedAll" :indeterminate="selectedPart" @on-change="changeSelectAll">全选</Checkbox>
      </div>
      <List border class="data-list">
        <template v-if="couponDefineList.length == 0">
          <ListItem class="list-item">
            <div style="width: 100%; color: #ccc; text-align: center;">暂无数据</div>
          </ListItem>
        </template>
        <template v-else>
          <CheckboxGroup v-model="selectedCouponIds">
            <ListItem v-for="(item,index) in couponDefineList" :key="index" class="list-item">
              <div class="item-top">
                <Checkbox :label="item.id" :disabled="item.state != 0">{{''}}</Checkbox>
                <KeyValueView title="标题" :value="item.title"></KeyValueView>
              </div>
              <div class="item-content">
                <KeyValueView title="类型" :value="getType(item)"></KeyValueView>
                <KeyValueView title="启用状态" :value="getState(item)"></KeyValueView>
                <KeyValueView title="折扣" :value="getDiscount(item)"></KeyValueView>
              </div>
            </ListItem>
          </CheckboxGroup>
        </template>
      </List>
    </Modal>
  </div>

</template>

<script>
import tiyData from "./js/distributeCoupon/distribute_coupons_data"
import {init,getVipDefines,distributeMonthCoupons} from "./js/distributeCoupon/distribute_coupons_fun"
import KeyValueView from "../widgets/KeyValueView";

export default {
    data() {
        return {
            couponDefineList:tiyData.tData.couponDefineList,
            tParam: tiyData.tParam,
            status: tiyData.tStatus,
            couponDefineTable:tiyData.couponDefineTable(this),
            couponTypeDict:this.$store.getters.dictionaries.couponType,
            tRole:{
                COUPONS_3_201 : "COUPONS-3-201"
            },
            selectedCouponIds: [],
          selectedAll: false,
          selectedPart: false,
        }
    },
    components: {
      KeyValueView

    },
    computed: {},
    methods: {
        showDistributeMonth(){
            tiyData.tStatus.modalDistribute.isShow = true;
            getVipDefines(this, tiyData);
        },
        selectedChanged(selection){
            tiyData.tParam.selectedCouponDefines = selection;
        },
        distributeMonthCoupons(){
            tiyData.tParam.selectedCouponIds.splice(0);
            tiyData.tParam.selectedCouponIds.push(...this.selectedCouponIds);
            distributeMonthCoupons(this, tiyData);
        },
      getType(item) {
        return item.type===200?"折扣券":"现金抵扣券";
      },
      getState(item) {
        return item.state===0?"生效中":"已禁用";
      },
      getDiscount(item) {
        let discountValue = "";
        let couponType = item.type;
        if(couponType===100){
          discountValue = '$'+item.faceValue;
        }else if(couponType == 200){
          discountValue = (100-item.discountRate*100).toFixed(1)+"%";
        }
        return '满 $'+item.threshold+' 减 '+ discountValue;
      },
      changeSelectAll(selected) {
          if(selected) {
            let selectableList = this.couponDefineList.filter(item => item.state == 0);
            let selectableIds = selectableList.map(row => {return row.id});
            this.selectedCouponIds.splice(0, this.selectedCouponIds.length, ...selectableIds);
          }else{
            this.selectedCouponIds.splice(0);
          }
      },
    },
    mounted() {
        init(tiyData);
    },
    watch: {
      "selectedCouponIds": {
        handler(newVal, oldVal) {
          let selectableList = this.couponDefineList.filter(item => item.state == 0);
          this.selectedAll = newVal.length == selectableList.length;
          this.selectedPart = newVal.length > 0 && !this.selectedAll;
        }
      }
    },
}
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }


  .panel{
    background: #f3f3f3;
    border-radius: 2px;
    width: 90%;
    text-align: left;
    margin: 2rem;
    .panel_content{
      padding: 1.5rem 1rem ;
      text-align: left;
    };

    .title{
      background: #2196f3;
      padding: 0.3rem 1rem ;
      border-radius: 1px;
      color: white;
    }

  }

  .tag_item{
    cursor: pointer;
    padding: 0.6rem 1rem ;
    background: #c27cbb;
    margin: 1rem ;
    color: white;
    width: 12rem;
  }

.data-list {
  margin: 1rem 0rem;
  line-height: 25px;
  .list-item {
    .flex-colum-wrap;
    justify-items: left;
    align-items: start;
    .item-checkbox {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      vertical-align: top;
    }
    .item-img {
      width: 130px;
      text-align: center;
      display: inline-block;
    }
    .item-top{
      width: 100%;
      margin-bottom: 5px;
      .flex-row-wrap;
      justify-content: left;
    }
    .item-content {
      margin-bottom: 35px;
      text-align: left;
    }
    .item-bottom{
      //position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      //padding: 0 1rem 0.5rem 0;
      text-align: right;
      button {
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
